<template>
    <div id="app">
        <popup  v-show="notifyShow" v-model="show_notify" position="top" :show-mask="false">
	        <div class="notify-style" @click="showNotify">
	            {{notify.title}}
	        </div>
      	</popup>
        <div class="weui_tab">
            <div class="body-content weui_tab_bd">
                <router-view keep-alive></router-view>
            </div>
            <tabbar v-show="isShow" id="tabbar" class="vux-tabbar" icon-class="vux-center" slot="bottom">
                <tabbar-item @click.native="main">
                    <span class="icon-22" slot="icon">&#xe635;</span>
                    <span slot="label">我的订单</span>
                </tabbar-item>
                <template v-if="canOrder">
                    <tabbar-item @click.native="appointOrder">
                    <span class="icon-22" slot="icon">&#xe63a;</span>
                    <span slot="label">预定服务</span>
                </tabbar-item>
                </template>
                <template v-else>
                <tabbar-item @click.native="orders">
                    <span class="icon-22" slot="icon">&#xe623;</span>
                    <span slot="label">订单中心</span>
                </tabbar-item>
            </template>
                <tabbar-item @click.native="owner">
                    <span class="icon-22" slot="icon">&#xe630;</span>
                    <span slot="label">我的</span>
                </tabbar-item>
            </tabbar>
        </div>
    </div>

</template>

<script>
    import {Tabbar, Popup, TabbarItem, ViewBox} from 'vux'
import {current_user} from './util.js'
export default {
    components: {
        Tabbar,
        TabbarItem,
            ViewBox,
            Popup
    },
    name: 'app',
    data() {
        return {
            notify: {},
            show_notify: true,
        }
    },
    created() {
        let self = this
        self.$cable.subscriptions.create({
            channel: "NotifyChannel",
            user_id: current_user().id
        },
            {
                received(data){
                    console.log(data)
                    self.$store.commit("storeNotify", true)
                    self.notify = JSON.parse(data)
                }
            }
        )
    },
    watch: {
        show_notify(val) {
            if (val) {
                setTimeout(() => {
                    this.show_notify = false
                }, 5000)
            }
        }
    },
    computed: {
        notifyShow() {
        	this.show_notify = this.$store.getters.show_notify
            return this.$store.getters.show_notify
        },
        isShow(){
            return this.$store.getters.dash
        },
        canOrder() {
            if (current_user().role == 2) {
                return false
            } else {
                return true
            }
        }
    },
    methods: {
        main(){
            this.$router.push({path: "/main", query: {type: "all", attr: this.attr}})
        },
        orders(){
            this.$router.push({path: "/main", query: {type: "service", attr: this.attr}})
        },
        owner() {
            this.$router.push("/owner")
        },
        appointOrder(){
            this.$router.push("/appoint")        
        },
        showNotify(){
            this.$store.commit("storeNotify", false)
            this.$router.push({name: "notify", params: {id: this.notify.notify_id} })
        }
    }
}
</script>

<style lang="less">
    @import '~vux/src/styles/reset.less';
    @import '~vux/src/styles/1px.less';
    @import '~vux/src/styles/tap.less';

    body {
        background-color: #fbf9fe;
    }

    .icon-22 {
        font-family: 'vux-demo';
        font-size: 22px;
        color: #888;
    }
    .icon-22:before {
        content: attr(icon);
    }
    @font-face {
        font-family: 'vux-demo';  /* project id 70323 */
        src: url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot');
        src: url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot?#iefix') format('embedded-opentype'),
        url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.woff') format('woff'),
        url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.ttf') format('truetype'),
        url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.svg#iconfont') format('svg');
    }
    .body-content {
        margin-top: 5px;
        margin-bottom: 70px;
        position: relative;
    }
    #tabbar {
        position: fixed;
    }
    .notify-style {
        background-color: #fcf8e3;
        color: #8a6d3b;
        text-align: center;
        border-radius: 4px;
        border-color: #faebcc;
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
